<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible=true">添加商品</el-button>
    <el-table :data="products" style="width: 100%">
      <el-table-column label="编号" prop="id" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="价格" prop="price" />
      <el-table-column label="型号" prop="type" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="editProduct(scope.row)">
            更新
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="deleteProduct(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="loadProducts" />
    <!--    商品编辑对话框-->
    <el-dialog v-model="dialogFormVisible" title="商品信息" width="500" @close="this.product = {}">
      <el-form :model="product">
        <el-form-item label="名称" >
          <el-input v-model="product.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="价格" >
          <el-input v-model="product.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="型号" >
          <el-input v-model="product.type" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveProduct">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
export default {
  name: "ProductView",
  data(){
    return {
      products: [],
      total: 0,      //总数
      current: 1,    //当前页数
      pageSize: 10,  //页面大小
      search: '',
      dialogFormVisible: false,  //对话框是否显示
      product: {} //当前商品
    }
  },
  methods:{
    loadProducts(current){
      this.current = current;
      //使用axios请求后台
      this.$axios.get('/products-page?current=' + this.current + '&pageSize=' + this.pageSize)
          .then(result => {
            console.log('product',result.data)
            if(result.data.data){
              this.products = result.data.data;
              this.total = result.data.total;
            }
          })
    },
    //编辑商品
    editProduct(stu){
      this.dialogFormVisible = true;
      //商品回显效果  stu --> string ---> 对象 深克隆
      this.product = JSON.parse(JSON.stringify(stu));
    },
    //保存商品
    saveProduct(){
      //通过id是否存在，判断是做添加还是更新
      if(this.product.id){
        //调用更新商品的servlet
        this.$axios.put('/product',this.product)
            .then(result => {
              console.log('save',result.data)
              if(result.data){
                ElMessage.success('更新成功')
                //更新商品信息
                this.loadProducts(this.current)
              }
            })
      }else{
        //调用添加商品的servlet
        this.$axios.post('/product',this.product)
            .then(result => {
              console.log('save',result.data)
              if(result.data){
                ElMessage.success('添加成功')
                //添加商品信息
                this.loadProducts(this.current)
              }
            })
      }
      this.dialogFormVisible = false
    },
    //删除商品
    deleteProduct(stu){
      this.$confirm('是否确认删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('stu',stu)
        //从后台删除商品
        this.$axios.delete('/product/' + stu.id)
            .then(result => {
              if(result.data){
                //刷新当页
                this.loadProducts(this.current)
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
    this.loadProducts(1)
  }
}
</script>

<style scoped>

</style>